<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>hexo博客(一)：使用hexo+oschina搭建个人博客 | Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="最近想搭建一个个人站点，却意外发现了一个好东西，hexo+github pages可以搭建免费的博客！挺有意思，以前也没怎么写过技术博客，索性就趁着这个机会补上以前拉下的功课吧。 o(=·ω·=)m
什么是Hexo？Hexo是一个简单地、轻量地、基于Node的一个静态博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。有丰富的主题可选，还">
<meta property="og:type" content="article">
<meta property="og:title" content="hexo博客(一)：使用hexo+oschina搭建个人博客">
<meta property="og:url" content="http://mmczgd.oschina.io/hexoblog/2017/03/22/hexo1/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="最近想搭建一个个人站点，却意外发现了一个好东西，hexo+github pages可以搭建免费的博客！挺有意思，以前也没怎么写过技术博客，索性就趁着这个机会补上以前拉下的功课吧。 o(=·ω·=)m
什么是Hexo？Hexo是一个简单地、轻量地、基于Node的一个静态博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。有丰富的主题可选，还">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/gitbash.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/hexofirst.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/public.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/gitcreate1.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/gitcreate2.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/gitcreate3.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/deploy.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/deploy2.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/pages1.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/pages2.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/pages3.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/pagesshow.jpg">
<meta property="og:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/url.jpg">
<meta property="og:updated_time" content="2017-03-22T15:14:20.997Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="hexo博客(一)：使用hexo+oschina搭建个人博客">
<meta name="twitter:description" content="最近想搭建一个个人站点，却意外发现了一个好东西，hexo+github pages可以搭建免费的博客！挺有意思，以前也没怎么写过技术博客，索性就趁着这个机会补上以前拉下的功课吧。 o(=·ω·=)m
什么是Hexo？Hexo是一个简单地、轻量地、基于Node的一个静态博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。有丰富的主题可选，还">
<meta name="twitter:image" content="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/gitbash.jpg">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/hexoblog/css/style.css">
  

</head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/hexoblog/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/hexoblog/">Home</a>
        
          <a class="main-nav-link" href="/hexoblog/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="Flux RSS"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Rechercher"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" results="0" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://mmczgd.oschina.io/hexoblog"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-hexo1" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/hexoblog/2017/03/22/hexo1/" class="article-date">
  <time datetime="2017-03-22T11:53:13.000Z" itemprop="datePublished">2017-03-22</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      hexo博客(一)：使用hexo+oschina搭建个人博客
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>最近想搭建一个个人站点，却意外发现了一个好东西，hexo+github pages可以搭建免费的博客！挺有意思，以前也没怎么写过技术博客，索性就趁着这个机会补上以前拉下的功课吧。 o(=·ω·=)m</p>
<h1 id="什么是Hexo？"><a href="#什么是Hexo？" class="headerlink" title="什么是Hexo？"></a>什么是Hexo？</h1><p>Hexo是一个简单地、轻量地、基于Node的一个静态博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。有丰富的主题可选，还可以自定义主题。生成的静态文件托管在github上。</p>
<h1 id="什么是github-pages？"><a href="#什么是github-pages？" class="headerlink" title="什么是github pages？"></a>什么是github pages？</h1><p>GitHub Pages 可以被认为是用户编写的、托管在 <a href="https://github.com/" target="_blank" rel="external">github</a> 上的静态网页。由于它的空间免费稳定， 可以用于介绍托管在github上的Project或者搭建网站。我平常使用的是<a href="https://git.oschina.net/" target="_blank" rel="external">码云</a>（因为使用开源中国的很多产品，方便社会化协作），而不是github，都是一样的，国内还有一家代码托管平台<a href="https://coding.net/" target="_blank" rel="external">coding</a>。</p>
<a id="more"></a>
<h1 id="1-搭建环境"><a href="#1-搭建环境" class="headerlink" title="1.搭建环境"></a>1.搭建环境</h1><p>安装hexo的前提是要有Node.js以及Git，我是直接从<a href="https://nodejs.org/en/" target="_blank" rel="external">Node</a>和<a href="https://git-scm.com/" target="_blank" rel="external">Git</a>官网下载的安装包安装的，你可以参考<a href="https://hexo.io/zh-cn/docs/" target="_blank" rel="external">Hexo官网教程</a>进行搭建。</p>
<p>安装完Node以及Git后，通过下面的命令安装Hexo:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install -g hexo-cli</div></pre></td></tr></table></figure>
<p>我们可以直接使用Git Bash这个命令行工具，<img src="/hexoblog/2017/03/22/hexo1/gitbash.jpg" alt="GitBash" title="GitBash"></p>
<h1 id="2-本地运行-Hexo"><a href="#2-本地运行-Hexo" class="headerlink" title="2.本地运行 Hexo"></a>2.本地运行 Hexo</h1><p>安装 Hexo 完成后，请依次执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$ hexo init &lt;folder&gt;</div><div class="line">$ cd &lt;folder&gt;</div><div class="line">$ npm install</div></pre></td></tr></table></figure></p>
<p>例如我们要把他放到c盘根目录的HexoBlog，那命令如下：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">cd c:</div><div class="line">hexo init hexoBlog</div><div class="line">cd c:hexoBlog</div><div class="line">npm install</div></pre></td></tr></table></figure></p>
<p>新建完成后，指定文件夹的目录如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">.</div><div class="line">├── _config.yml</div><div class="line">├── package.json</div><div class="line">├── scaffolds</div><div class="line">├── source</div><div class="line">|   ├── _drafts</div><div class="line">|   └── _posts</div><div class="line">└── themes</div></pre></td></tr></table></figure>
<p>下面依次介绍上面各个文件或者目录的用途：</p>
<ul>
<li><code>_config.yml</code>站点配置文件，很多全局配置都在这个文件中。</li>
<li><code>package.json</code> 应用数据。从它可以看出hexo版本信息，以及它所默认或者说依赖的一些组件。</li>
<li><code>scaffolds</code> 模版文件。当你创建一篇新的文章时，hexo会依据模版文件进行创建，主要用在你想在每篇文章都添加一些共性的内容的情况下。</li>
<li><code>scripts</code> 放脚本的文件夹， 就是放js文件的地方</li>
<li><code>source</code> 这个文件夹就是放文章的地方了，除了文章还有一些主要的资源，比如文章里的图片，文件等等东西。这个文件夹最好定期做一个备份，丢了它，整个站点就废了。</li>
<li>themes 主题文件夹。</li>
</ul>
<blockquote>
<p>详细信息可以查看官网介绍<a href="https://hexo.io/zh-cn/docs/setup.html" target="_blank" rel="external">建站</a>、<a href="https://hexo.io/zh-cn/docs/configuration.html" target="_blank" rel="external">配置</a></p>
</blockquote>
<p>到这里我们就可以现在本地运行查看效果了，走起。执行下面命令：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">cd c:hexoBlog</div><div class="line">hexo server</div></pre></td></tr></table></figure></p>
<p>浏览器输入<a href="http://localhost:4000" target="_blank" rel="external">http://localhost:4000</a>就可以看到效果。如下：<br><img src="/hexoblog/2017/03/22/hexo1/hexofirst.jpg" alt="hexofirst.jpg" title=""></p>
<h1 id="3-编写第一篇博客"><a href="#3-编写第一篇博客" class="headerlink" title="3.编写第一篇博客"></a>3.编写第一篇博客</h1><p>这里有两种方式，第一种使用如下命令新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$ hexo new [layout] &lt;title&gt;</div><div class="line">`</div></pre></td></tr></table></figure></p>
<p>举例：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">cd c:hexoBlog</div><div class="line">hexo new first</div></pre></td></tr></table></figure></p>
<p>将会在HexoBlog项目的source 目录下的_posts 文件夹中看到有个first.md文件，这就是刚才新建的文章，你会发现普通的.md文件不同，文件开头有如下代码：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">---</div><div class="line">title: first(文章标题)</div><div class="line">date: 2017-03-22 21:21:32（文章日期）</div><div class="line">tags:（文章标签）</div><div class="line">---</div></pre></td></tr></table></figure></p>
<p>这些是前置申明，还有一些其他的申明以后会说到。<br>。此外还有一个默认的hello-world.md文件，这是默认安装时带的。<br>所以另一种方式就是将你写好的文件直接放_posts文件中，不过要有前置申明。</p>
<p>使用<code>hexo server</code>重新启动就能看到刚才新建的文章了。</p>
<h1 id="4-生成静态文件"><a href="#4-生成静态文件" class="headerlink" title="4.生成静态文件"></a>4.生成静态文件</h1><p>现在只能在本地启动项目然后通过本地地址访问博客网站，下面我们就可以利用Hexo生成静态Html，很简单，只需要在命令窗口执行下面代码：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure></p>
<p>项目根目录下会生成一个public文件夹，这是直接可以拷走用的,我们托管的就是这一部分代码。<br><img src="/hexoblog/2017/03/22/hexo1/public.jpg" alt="public.jpg" title=""></p>
<h1 id="5-发布静态Html文件到码云-Pages"><a href="#5-发布静态Html文件到码云-Pages" class="headerlink" title="5.发布静态Html文件到码云 Pages"></a>5.发布静态Html文件到码云 Pages</h1><p>首先需要注册一个码云账号，然后创建一个项目：<br><img src="/hexoblog/2017/03/22/hexo1/gitcreate1.jpg" alt="gitcreate1.jpg" title=""><br><img src="/hexoblog/2017/03/22/hexo1/gitcreate2.jpg" alt="gitcreate2.jpg" title=""><br>创建完项目后得到项目的Https的地址后面要用。地址获取如下图<br><img src="/hexoblog/2017/03/22/hexo1/gitcreate3.jpg" alt="gitcreate3.jpg" title=""></p>
<p>Hexo 提供了快速方便的一键部署功能，让您只需一条命令就能将网站部署到服务器上。<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure></p>
<p>但我们需要先安装一个插件，使用如下命令：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install hexo-deployer-git --save</div></pre></td></tr></table></figure></p>
<p>接下来配置根目录_config.yml 文件，修改deploy 的值，如下图：<br><img src="/hexoblog/2017/03/22/hexo1/deploy.jpg" alt="deploy.jpg" title=""></p>
<p>然后执行一键部署命令：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure></p>
<p>举例：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">cd c:hexoBlog</div><div class="line">hexo deploy</div></pre></td></tr></table></figure></p>
<p>之后会弹出输入码云账号密码的对话框。</p>
<p>部署成功之后，登录码云，查看之前创建的项目中出现了本地项目中public 文件夹中的文件，这时候代表之前的部署是成功的。<br><img src="/hexoblog/2017/03/22/hexo1/deploy2.jpg" alt="deploy2.jpg" title=""></p>
<p>然后开启码云的Pages功能：<br><img src="/hexoblog/2017/03/22/hexo1/pages1.jpg" alt="pages1.jpg" title=""><br><img src="/hexoblog/2017/03/22/hexo1/pages2.jpg" alt="pages2.jpg" title=""></p>
<p>访问链接：<br><img src="/hexoblog/2017/03/22/hexo1/pages3.jpg" alt="pages3.jpg" title=""></p>
<p>哇塞，这就成了，感觉不是很难啊？但是怎么是这个样子，样式呢？<br><img src="/hexoblog/2017/03/22/hexo1/pagesshow.jpg" alt="pagesshow.jpg" title=""></p>
<p>原因：<br>如果你想以根目录的形式访问自己的静态网站，只需要建立一个与自己个性地址同名的项目即可，如<a href="http://git.oschina.net/ipvb" target="_blank" rel="external">http://git.oschina.net/ipvb</a> 这个用户，想要创建一个自己的站点，但不想以子目录的方式访问，想以ipvb.oschina.io直接访问，那么他就可以创建一个名字为ipvb的项目<a href="http://git.oschina.net/ipvb/ipvb" target="_blank" rel="external">http://git.oschina.net/ipvb/ipvb</a> 部署完成后，就可以以<a href="http://ipvb.oschina.io" target="_blank" rel="external">http://ipvb.oschina.io</a> 进行访问了。</p>
<p>举例：<br>这个博客交HexoBlog，那么你注册时候填写的账户也得是HexoBlog。我的不是，所以我的用子目录才能正确的访问到css,js,hexoBlog/images等路径，所以修改根目录_config.yml 文件，修改url 的值，如下图<br><img src="/hexoblog/2017/03/22/hexo1/url.jpg" alt="url.jpg" title=""></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://mmczgd.oschina.io/hexoblog/hexoblog/2017/03/22/hexo1/" data-id="cj0l3tz070002fkvo21ykjna0" class="article-share-link">Partager</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/hexoblog/tags/hexo/">hexo</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/hexoblog/2017/03/22/hexo2/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Récent</strong>
      <div class="article-nav-title">
        
          hexo博客(二)：图片引用问题
        
      </div>
    </a>
  
  
    <a href="/hexoblog/2017/03/17/hello-world/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Ancien</strong>
      <div class="article-nav-title">Hello World</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Mot-clés</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/hexoblog/tags/hexo/">hexo</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Nuage de mot-clés</h3>
    <div class="widget tagcloud">
      <a href="/hexoblog/tags/hexo/" style="font-size: 10px;">hexo</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/hexoblog/archives/2017/03/">March 2017</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Articles récents</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/hexoblog/2017/03/22/hexo2/">hexo博客(二)：图片引用问题</a>
          </li>
        
          <li>
            <a href="/hexoblog/2017/03/22/hexo1/">hexo博客(一)：使用hexo+oschina搭建个人博客</a>
          </li>
        
          <li>
            <a href="/hexoblog/2017/03/17/hello-world/">Hello World</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2017 John Doe<br>
      Propulsé by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/hexoblog/" class="mobile-nav-link">Home</a>
  
    <a href="/hexoblog/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/hexoblog/fancybox/jquery.fancybox.css">
  <script src="/hexoblog/fancybox/jquery.fancybox.pack.js"></script>


<script src="/hexoblog/js/script.js"></script>

  </div>
</body>
</html>